<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>
<template>
  <wd-tabs v-model="tab" @change="handleTabChange">
    <block v-for="item in tabList" :key="item">
      <wd-tab :title="item.label" :name="item.name">
        <wd-grid :column="4" clickable>
          <wd-grid-item
            v-for="tag in item.data"
            :key="tag.sign"
            use-slot
            @itemclick="onTagClick(tag)"
          >
            <view class="flex flex-col justify-center items-center gap-y-2">
              <view
                :class="{ tagActive: activeTag && tag.sign === activeTag.sign }"
                class="bg-stone-100 w-12 h-12 flex justify-center items-center rounded-full transition-all"
              >
                <wd-icon class-prefix="blueberry" :name="tag.sign" size="32px" />
              </view>
              <text>{{ tag.name }}</text>
            </view>
          </wd-grid-item>
        </wd-grid>
      </wd-tab>
    </block>
  </wd-tabs>
  <wd-action-sheet
    v-model="showPanel"
    :close-on-click-modal="false"
    custom-class="itemEditorPop"
    class="editPadAction"
    @close="showPanel = false"
  >
    <!-- <view class="h-30vh" style="padding: 15px 15px 150px 15px">内容</view> -->
    <NumberPad @submit="handleSubmit" />
  </wd-action-sheet>
</template>
<script lang="ts" setup name="AddAccount">
import CusWdIcon from '@/components/custom-wot-comp/CusWdIcon.vue'
import NumberPad from '@/components/NumberPad.vue'
import { ref, reactive } from 'vue'
import { getTagList } from '@/service/keepAccount'
import { Tag, Item } from '@/types/keepAccount'
const tabList = reactive([
  {
    name: 'expenses',
    label: '支出',
    data: [],
  },
  {
    name: 'income',
    label: '收入',
    data: [],
  },
])
const tab = ref('tab1')
const activeTag = ref<Tag>(null)
const showPanel = ref(false)
const onTabChange = () => {}
const _getTagList = async () => {
  const res = await getTagList<{ expensesTags: []; incomeTags: [] }>()
  const { expensesTags, incomeTags } = res.data
  tabList.forEach((item) => {
    if (item.name === 'expenses') {
      item.data = expensesTags
    } else {
      item.data = incomeTags
    }
  })
  console.log('🚀 ~ const_getTagList= ~ res:', res)
}
onMounted(async () => {
  await _getTagList()
})
const handleTabChange = (e: any) => {
  activeTag.value = null
  showPanel.value = false
}
const onTagClick = (tag: Tag) => {
  activeTag.value = tag
  showPanel.value = true
}
const handleSubmit = (value: Partial<Item>) => {
  console.log('🚀 ~ handleSubmit ~ value:', value)
  // if(signValue.value === undefined){
  //   showDialog({ title: '错误', message: '请选择标签', width: '320px' })
  //   return
  // }
  // http.post('/item', { ...value, tag_id: signValue.value, kind: active.value }, { _autoLoading: true }).then(res=>{
  //   showSuccessToast({message:'添加成功',iconSize:'28px'})
  //   router.push('/home/billPage')
  // }).catch(err=>{
  //   showFailToast({message:'保存失败',iconSize:'28px'})
  // })
}
</script>
<style scoped lang="scss">
.tagActive {
  @apply bg-purple-500 color-white;
}
.editPadAction {
  :deep(.wd-popup-wrapper) {
    .wd-overlay {
      display: none;
    }
  }
}
</style>
